<template>
	<view v-if="myIsShow">
		<Tabbar :current-page="3"></Tabbar>
		<view class="bg"></view>
		<view class="top">个人信息</view>

		<!-- 个人信息 -->
		<view class="top-box">
			<view class="header">
				<image class="avatar-images" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="">
					<view class="nick-name" style="font-size: 32rpx;color: #000;margin-bottom: 23rpx;">{{
              userInfo.username
            }}
					</view>
					<view class="" style="font-size: 26rpx;">车主，您好！</view>
				</view>
			</view>
		</view>
		<!-- 中间内容 -->
		<view class="content-box">
			<view class="btn-box">
				<view class="cell-box" v-for="item in textDetail" :key="item.id" @click="jumpTo(item.id)">
					<view class="" style="font-size: 28rpx;margin-bottom: 27rpx;font-weight: bold;">{{ item.name }}
					</view>
					<view class="cell-box-bottom">
						{{ item.value }}
						<image :src="item.url" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 客服 -->
			<view class="customers-box">
				<view class="customers-box-left">
					<!-- <image src="/static/imges/customer.png" mode="widthFix"></image> -->
					<contact-button
					  tnt-inst-id="SLk_aEqp"
					  scene="SCE01288627"
					  size="88rpx"
					  icon="/static/img/custom.png"
					/>
					在线客服
				</view>
				<view class="">
					<image class="returns" src="/static/imges/return.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 轮播图 -->
			<view class="swiper-box">
				<u-swiper :list="swiperList" keyName="dictInfoImg" imgMode="scaleToFill" indicator="false"
					indicatorMode="dot" :autoplay="false" @change="onChange" height="200" radius="15">
				</u-swiper>
			</view>
			<view class="btn">
				<view class="share" @click="goEtcManage">立即办理</view>
			</view>
		</view>

	</view>
</template>

<script lang="ts">
	// @ts-nocheck
	import Vue from 'vue';
	import { getUserInfo } from "../../api/my/my";
	import { getRoles } from "../../api/common/login";
	import Tabbar from "../../components/tabbar.vue";
	import { getDictAll } from "../../api/common/dict";

	let app = getApp();
	export default Vue.extend({
		components: { Tabbar },
		data() {
			return {
				myIsShow: app.globalData.myIsShow,
				userInfo: {
					nickname: '',//用户昵称
					avatar: '',//头像
				},

				textDetail: [{
					id: 1,
					name: '注销订单',
					value: '查看注销订单信息',
					url: '/static/imges/cell.png'
				},
				{
					id: 2,
					name: '办理订单',
					value: '查看办理订单信息',
					url: '/static/imges/take.png'
				},
				],
				swiperCurrent: 0, //当前显示第几张图
				swiperList: [
					// {
					//   dictInfoImg: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					// },
					// {
					//   dictInfoImg: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					// },
					// {
					//   dictInfoImg: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					// }
				],
				userInfo:{}
			}
		},
		async onShow() {
			this.userInfo=uni.getStorageSync('userInfo')
			console.log(this.userInfo)
			const roles = await getRoles()
			if (roles.indexOf('role:login_app') === -1) {
				uni.navigateTo({
					url: '/pages/common/nick_avatar'
				})
			}
			await this.getUsers()
			await this.getMySwiper();//获取个人中心轮播
		},
		methods: {
			// 立即办理
			goEtcManage() {
				uni.redirectTo({
					url: '/pages/index/select-pay'
				})
			},
			//  手动切换轮播图
			onChange(event) {
				this.swiperCurrent = event.current;
			},
			async getMySwiper() {
				const params = {
					dictCode: 'banner_home'
				}
				const data = await getDictAll(params)
				this.swiperList = data;
				// console.log(data, '获取首页公告')
			},
			async getUsers() {
				this.userInfo = await getUserInfo()
			},
			jumpTo(id : number) {
				uni.setStorageSync('navIndex', id)
				uni.switchTab({
					url: '/pages/orders/orders'
				})
			},
			//   跳转客服
			toCustomers() {
				uni.switchTab({
					url: '/pages/customer/customer'
				})
			},
		}
	})
</script>

<style>
	.bg {
		position: fixed;
		width: 100%;
		height: 462rpx;
		background: linear-gradient(0deg, #E5ECF6, #CBD2EB);
		z-index: -1;
	}

	/*  */
	.top {
		padding-top: 120rpx;
		text-align: center;
	}

	.top-box {
		position: relative;
		top: 40rpx;
		left: 60rpx;
		z-index: 5;
		width: 690rpx;
	}

	.header {
		display: flex;
		align-items: center;
	}

	.avatar-images {
		width: 124rpx;
		height: 124rpx;
		border-radius: 50%;
		margin-right: 21rpx;
	}

	.header-btn {
		padding: 10rpx 20rpx;
		background-color: #EFF1FF;
		border-radius: 5rpx;
	}

	/*  */
	.content-box {
		min-height: 60vh;
		background: #F4F6FA;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: relative;
		top: 79rpx;
		left: 0;
		padding: 30rpx 25rpx 135rpx 25rpx;
		/*border: 1rpx solid yellow;*/
	}

	.btn-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 15rpx;
	}

	.cell-box {
		padding: 35rpx 18rpx 20rpx 31rpx;
		background: linear-gradient(180deg, #EBEEFF, #FEFEFE);
		border-radius: 20rpx;
	}

	.cell-box-bottom {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.cell-box-bottom image {
		width: 68rpx;
		height: 68rpx;
		margin-left: 21rpx;
	}

	.swiper-box {
		margin-top: 30rpx;
	}

	/*  */
	.customers-box {
		margin-top: 32rpx;
		background-color: #fff;
		padding: 48rpx 23rpx 48rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 20rpx;
	}

	.customers-box-left {
		display: flex;
		align-items: center;
	}

	.customers-box-left image {
		width: 35rpx;
		height: 38rpx;
		margin-right: 14rpx;
	}

	.returns {
		width: 15rpx;
		height: 26rpx;
	}

	/* 可移动按钮 */
	.movableArea {
		position: fixed;
		top: 0rpx;
		left: 0;
		bottom: 200rpx;
		width: 100%;
		height: 100%;
		pointer-events: none;
		/* //设置area元素不可点击，则事件便会下移至页面下层元素 */
		z-index: 100;
	}

	.movableView {
		pointer-events: auto;
		/* //可以点击 */
		width: 88rpx;
		height: 88rpx;
	}

	.bg-img {
		width: 100%;
		height: 100%;
	}

	.bg-btn {
		background-color: #00000000;
		padding: 0;
		border: 0;
	}

	button {
		width: 550rpx;
		/* border: 1rpx solid pink; */
		text-align: left;
		border: 0;
	}

	button::after {
		border: none;
		
	}

	.btn {
		width: 660rpx;
		margin: 79rpx auto 51rpx;
		/*display: flex;*/
		/*justify-content: flex-end;*/
	}

	.share {
		width: 660rpx;
		height: 86rpx;
		background: #1A6FFD;
		border-radius: 43rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 86rpx;
		text-align: center;
		margin-right: 50rpx;
	}
</style>